<template>
  <page-layout class="page">
    <div>
      <a-alert
        message="Peach Design  一套绝美的VUE3中后台框架"
        type="success"
      />

      <div class="mt10 mb10" />

      <a-row :gutter="[16, 16]">
        <a-col :lg="6" :md="6" :sm="6" :xs="12">
          <a-card :bordered="false">
            <a-statistic
              title="Active Users"
              :value="9.3"
              :precision="2"
              suffix="%"
              class="demo-class"
              :value-style="{ color: '#cf1322' }"
            >
              <template #prefix>
                <arrow-down-outlined />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :lg="6" :md="6" :sm="6" :xs="12">
          <a-card :bordered="false">
            <a-statistic
              title="Feedback"
              :value="11.28"
              :precision="2"
              suffix="%"
              :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px"
            >
              <template #prefix>
                <arrow-up-outlined />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :lg="6" :md="6" :sm="6" :xs="12">
          <a-card :bordered="false">
            <a-statistic
              title="Unmerged"
              :value="1128"
              style="margin-right: 50px"
            >
              <template #suffix>
                <like-outlined />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :lg="6" :md="6" :sm="6" :xs="12">
          <a-card :bordered="false">
            <a-statistic-countdown
              title="Countdown"
              :value="deadline"
              style="margin-right: 50px"
            />
          </a-card>
        </a-col>
      </a-row>
    </div>

    <div class="mt20 mb20" />

    <a-row :gutter="[16, 16]">
      <a-col :lg="12" :md="12" :sm="24" :xs="24">
        <a-card title="访问量" :bordered="false">
          <div id="LineBox"></div>
        </a-card>
      </a-col>
      <a-col :lg="12" :md="12" :sm="24" :xs="24">
        <a-card title="人流量" :bordered="false">
          <div id="barBox"></div>
          <Echarts class="chart" autoresize :option="chartData2" />
        </a-card>
      </a-col>
    </a-row>

    <div class="mt20 mb20" />

    <a-row :gutter="[16, 32]">
      <a-col :lg="12" :md="12" :sm="24" :xs="24">
        <a-card title="相关依赖信息" :bordered="false">
          <div>
            <a-tag color="#f50">VUE3</a-tag>
            <a-tag color="#2db7f5">Antd-Design</a-tag>
            <a-tag color="#87d068">Axios</a-tag>
            <a-tag color="#108ee9">Echarts</a-tag>
          </div>
          <div class="mt20 mb20" />
          <a-row :gutter="[16, 16]">
            <a-col :lg="12" :md="12" :sm="24" :xs="24">
              <a-row>
                <template v-for="(v, k, index) in dependencies" :key="index">
                  <a-col :span="12">
                    <div class="left_box" :class="[index === 0 && 'box_one']">
                      {{ k }}
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div class="right_box" :class="[index === 0 && 'box_one']">
                      {{ v }}
                    </div>
                  </a-col>
                </template>
              </a-row>
            </a-col>
            <a-col :lg="12" :md="12" :sm="24" :xs="24">
              <a-row>
                <template v-for="(v, k, index) in devDependencies" :key="index">
                  <a-col :span="12">
                    <div class="left_box" :class="[index === 0 && 'box_one']">
                      {{ k }}
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div class="right_box" :class="[index === 0 && 'box_one']">
                      {{ v }}
                    </div>
                  </a-col>
                </template>
              </a-row>
            </a-col>
          </a-row>
        </a-card>
      </a-col>

      <a-col :lg="12" :md="12" :sm="24" :xs="24">
        <a-card title="购买授权" :bordered="false">
          <a-row :gutter="16">
            <a-col :lg="12" :md="12" :sm="24" :xs="24">
              <a-alert
                message="Peach Design template"
                type="warning"
                class="mb4"
              />
              <a-row>
                <a-col :span="12">
                  <div class="left_box box_one">
                    价格
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="right_box box_one">
                    <a-tag color="#f50">免费</a-tag>

                    <a
                      href="https://gitee.com/may_zhouwei/peach-design-template"
                      target="_block"
                    >
                      <a-tag color="#87d068">码云链接</a-tag></a
                    >
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="left_box">
                    图表
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="right_box">
                    <a
                      href="https://gitee.com/may_zhouwei/peach-design-template"
                      target="_block"
                    >
                      <a-tag color="#87d068">G2Plot</a-tag></a
                    >
                  </div>
                </a-col>

                <a-col :span="12">
                  <div class="left_box">
                    响应式
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="right_box">
                    <a-tag color="#87d068">手机，平板 ， PC</a-tag>
                  </div>
                </a-col>

                <a-col :span="12">
                  <div class="left_box">
                    国际化
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="right_box">
                    <CloseCircleTwoTone class="f18" twoToneColor="red" />
                  </div>
                </a-col>

                <a-col :span="12">
                  <div class="left_box">
                    主体换肤
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="right_box">
                    <CloseCircleTwoTone class="f18" twoToneColor="red" />
                  </div>
                </a-col>

                <a-col :span="12">
                  <div class="left_box">
                    富文本
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="right_box">
                    <CloseCircleTwoTone class="f18" twoToneColor="red" />
                  </div>
                </a-col>

                <a-col :span="12">
                  <div class="left_box">
                    上传组件
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="right_box">
                    <a-tag color="#f50">Antd</a-tag>
                  </div>
                </a-col>
              </a-row>
            </a-col>
            <a-col :lg="12" :md="12" :sm="24" :xs="24">
              <a-badge style="width:100%" show-zero>
                <template #count>
                  <FireFilled class="f20" style="color:red" />
                </template>
                <a-alert message="Peach Design PRO" type="success" class="mb4"
              /></a-badge>
              <a-row>
                <a-col :span="12">
                  <div class="left_box box_one">
                    价格
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="right_box box_one">
                    <a-tag color="#f50">￥499</a-tag>
                    <a
                      href="http://wpa.qq.com/msgrd?v=3&uin=871003310&site=qq&menu=yes"
                      target="_block"
                    >
                      <a-tag color="#87d068">购买源码</a-tag>
                    </a>
                  </div>
                </a-col>

                <a-col :span="12">
                  <div class="left_box">
                    图表
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="right_box">
                    <a
                      href="https://gitee.com/may_zhouwei/peach-design-template"
                      target="_block"
                    >
                      <a-tag color="#87d068">Echart</a-tag></a
                    >
                  </div>
                </a-col>

                <a-col :span="12">
                  <div class="left_box">
                    响应式
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="right_box">
                    <a-tag color="#87d068">手机，平板 ， PC</a-tag>
                  </div>
                </a-col>

                <a-col :span="12">
                  <div class="left_box">
                    国际化
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="right_box">
                    <CheckCircleTwoTone
                      class="f18"
                      twoToneColor="rgb(135, 208, 104)"
                    />
                  </div>
                </a-col>

                <a-col :span="12">
                  <div class="left_box">
                    主体换肤
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="right_box">
                    <CheckCircleTwoTone
                      class="f18"
                      twoToneColor="rgb(135, 208, 104)"
                    />
                  </div>
                </a-col>

                <a-col :span="12">
                  <div class="left_box">
                    富文本
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="right_box">
                    <CheckCircleTwoTone
                      class="f18"
                      twoToneColor="rgb(135, 208, 104)"
                    />
                  </div>
                </a-col>

                <a-col :span="12">
                  <div class="left_box">
                    上传组件
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="right_box">
                    <a-tag color="#87d068">封装单图，多图上传</a-tag>
                  </div>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-card>

        <div class="mt15"></div>

        <a-card title="相关文档链接" :bordered="false">
          <a-row>
            <a-col :span="12">
              <div class="left_box box_one">
                Peach Design
              </div>
            </a-col>
            <a-col :span="12">
              <div class="right_box box_one">
                <a
                  href="https://gitee.com/may_zhouwei/peach-design-template"
                  target="_block"
                >
                  <a-tag color="#87d068">码云链接</a-tag></a
                >
              </div>
            </a-col>

            <a-col :span="12">
              <div class="left_box">
                G2Plot
              </div>
            </a-col>
            <a-col :span="12">
              <div class="right_box">
                <a
                  href="https://g2plot.antv.vision/zh/docs/api/plot-api"
                  target="_block"
                >
                  <a-tag color="#87d068">点击跳转</a-tag></a
                >
              </div>
            </a-col>

            <a-col :span="12">
              <div class="left_box">
                ant-design-vue
              </div>
            </a-col>
            <a-col :span="12">
              <div class="right_box">
                <a
                  href="https://2x.antdv.com/components/overview-cn/"
                  target="_block"
                >
                  <a-tag color="#87d068">点击跳转</a-tag></a
                >
              </div>
            </a-col>
            <a-col :span="12">
              <div class="left_box">
                vue3
              </div>
            </a-col>
            <a-col :span="12">
              <div class="right_box">
                <a
                  href="https://vue3js.cn/docs/zh/api/composition-api.html#setup"
                  target="_block"
                >
                  <a-tag color="#87d068">点击跳转</a-tag></a
                >
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
  <page-footer />
</template>
<script>
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
import {
  LikeOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  CloseCircleTwoTone,
  CheckCircleTwoTone,
  FireFilled
} from "@ant-design/icons-vue";
import { dependencies, devDependencies } from "../../../package.json";

import { Line } from "@antv/g2plot";
export default {
  components: {
    LikeOutlined,
    ArrowUpOutlined,
    CloseCircleTwoTone,
    ArrowDownOutlined,
    CheckCircleTwoTone,
    FireFilled
  },
  setup() {
    const state = reactive({
      lineBox: null,
      barBox: null
    });

    const renderLine = () => {
      const data = require("./data.js").default;
      state.lineBox = new Line("LineBox", {
        data,
        xField: "year",
        yField: "gdp",
        seriesField: "name",
        yAxis: {
          label: {
            formatter: v => `${(v / 10e8).toFixed(1)} B`
          }
        },
        legend: {
          position: "top"
        },
        smooth: true,
        // @TODO 后续会换一种动画方式
        animation: {
          appear: {
            animation: "path-in",
            duration: 5000
          }
        }
      });
      state.lineBox.render();
    };

    const renderBar = () => {
      const data = require("./data.js").data;
      state.barBox = new Line("barBox", {
        data,
        xField: "城市",
        yField: "销售额",
        xAxis: {
          label: {
            autoRotate: false
          }
        },
        slider: {
          start: 0.1,
          end: 0.2
        }
      });
      state.barBox.render();
    };

    onMounted(() => {
      renderLine();
      renderBar();
    });

    onUnmounted(() => {
      state.barBox.destroy();
      state.lineBox.destroy();
    });

    return {
      deadline: Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30,
      dependencies,
      devDependencies
    };
  }
};
</script>
<style lang="less" scoped>
.page {
  background-color: #f7f7f7;
}
.chart {
  height: 350px;
}
.bg_fff {
  background-color: #fff;
}
.left_box,
.right_box {
  height: 40px;
  line-height: 40px;
  border: 1px solid #b7b7b7;
  border-top: 0;
}
.box_one {
  border-top: 1px solid #b7b7b7;
}
.left_box {
  background-color: #f1f1f1;
  text-align: right;
  padding-right: 10px;
  border-right: 0;
}
.right_box {
  padding-left: 10px;
}
</style>
